<template>
  <div class="team" @click="showStoreList=false">
    <div class="change-page">
        <span @click="pageName='team'" :class="pageName=='team'?'add-team active':'add-team'">添加连锁店</span>
        <span @click="pageName='teamName'" :class="pageName=='teamName'?'add-team-name active':'add-team-name'">添加连锁名</span>
    </div>
    <div class="page-cont">
        <div v-if="pageName=='team'" class="team-add">
            <div class="store-search">
                <input type="text" placeholder="请输入店铺名." v-model="storeName" />
                <div class="store-list">
                    <div class="store-list-wrap" v-if="showStoreList">
                        <ul>
                            <li v-for="(item,index) in storeList" @click.stop="pushStoreList(item)" :key="index">
                                {{item.name}}
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="now-add-store">
                <div class="sel-store-list">
                    <table style="width:100%;">
                        <th style="width:70%;">店铺名</th>
                        <th style="width:30%;">操作</th>
                    </table>
                    <table style="width:100%;">
                        <tr v-for="(item,index) in nowSelStoreItem" :key="index">
                            <td style="width:70%;">{{item.name}}</td>
                            <td style="width:30%;" @click="delNowSelStore(item)" class="del">删除</td>
                        </tr>
                    </table>
                </div>
                <div class="save-team">
                    <button @click="saveTeamBefore">保存</button>
                </div>
            </div>
            <div class="sel-team-alert" v-if="showSaveTeam" @click="showSaveTeam=false">
                <div class="sel-team-alert-wrap" @click.stop="">
                    <select name="" id="" v-model="nowSelTeamId">
                        <option :value="item.id" v-for="(item,index) in nameData" :key="index">{{item.name}}</option>
                    </select>
                    <div class="save">
                        <button @click.stop="saveTeam">保存</button>
                    </div>
                </div>
            </div>
        </div>
        <div v-if="pageName=='teamName'" class="team-name">
            <div class="add-name">
                <span @click="showAddAlert=true">添加</span>
            </div>
            <div class="name-list">
                <ul>
                    <li v-for="(item,index) in nameData" :key="index">
                        <span class="name">{{item.name}}</span>
                        <span class="team-modify right" @click="showUpdateName(item)">修改</span>
                        <span class="team-info right" @click="lookTeamInfo(item)">查看连锁店铺</span>
                        <span class="team-time right">{{item.addTime | numberToDate}}</span>
                    </li>
                </ul>
            </div>
            <div class="add-alert" v-if="showAddAlert" @click="showAddAlert=false">
                <div class="add-name-wrap" @click.stop="">
                    <input type="text" v-model="newTeamName"  autofocus placeholder="请输入连锁名字." />
                    <div class="sure">
                        <span @click.stop="addName">确定</span>
                    </div>
                </div>
            </div>
            <div class="add-alert" v-if="showUpdateAlert" @click="showUpdateAlert=false">
                <div class="add-name-wrap" @click.stop="" >
                    <input type="text" v-model="teamName" autofocus placeholder="请输入连锁名字." />
                    <div class="sure">
                        <span @click.stop="updateName">确定</span>
                    </div>
                </div>
            </div>
            <div class="team-info-alert" v-if="showTeamInfo" @click="showTeamInfo=false">
                <div class="team-info-wrap" @click.stop="">
                    <!-- <div class="search">
                        <input type="text" @click.stop="" placeholder="请输入店铺名" />
                    </div> -->
                    <div class="team-store-list">
                        <ul v-if="teamStoreList.length>0">
                            <li v-for="(item,index) in teamStoreList"  :key="index">
                                <span class="store-name">{{item.storeName}}</span>
                                <span class="store-del right" @click="delTeamInfoStore(item)">删除</span>
                            </li>
                        </ul>
                        <div v-else style="padding:5px 0;text-align:center;">
                            暂无店铺
                        </div>
                    </div>
                    <!-- <div class="save-team-store">
                        <button @click="saveTeamByTeamInfo">保存</button>
                    </div> -->
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import {BASE_URL} from "./../../urlConfig/index";
export default {
  data() {
    return {
      teamStoreList:[],
      selTeam:{},
      showTeamInfo:false,
      showSaveTeam:false,
      nowSelTeamId:-1,
      nowSelStoreItem:[],
      storeList:[],
      showStoreList:false,
      storeName:"",
      showAddAlert:false,
      pageName:"team",
      newTeamName:"",
      teamName:"",
      showUpdateAlert:false,
      nameData:[],//连锁名字
      nowSelItem:{}
    };
  },
  watch: {
      storeName(val){
          console.log(val)
          if(!val){
              this.showStoreList = false;
              return;
          }else{
              this.showStoreList = true;
          }
          this.$http({
            url:BASE_URL+"v1/team/find-store",
            method:"GET",
            params:{
                name:val
            }
        }).then(res=>{
            console.log(res);
            this.storeList = res.data;
        });
      }
  },
  methods: {
      delTeamInfoStore(item){
          let teamStoreList = [];
          for(let i=0;i<this.teamStoreList.length;i++){
              if(this.teamStoreList[i].storeId == item.storeId){
                    this.teamStoreList.splice(i,1);
              }
          }
          this.$http({
            url:BASE_URL+"v1/team/delete-team",
            method:"POST",
            params:{
                id:item.id
            }
        }).then(res=>{
            this.$message({
                    message: "删除成功",
                    type: "success"
                });
        });
      },
      lookTeamInfo(item){
          this.selTeam = item;
          this.$http({
            url:BASE_URL+"v1/team/find-teams",
            method:"GET",
            params:{
                id:item.id
            }
        }).then(res=>{
            this.showTeamInfo = true;
            this.teamStoreList = res.data;
        });
      },
      saveTeamBefore(){
          if(this.nowSelStoreItem.length == 0){
              this.$message({
                    message: "请选择店铺",
                    type: "error"
                });
                return;
          }
          this.showSaveTeam = true;
      },
      saveTeam(){
          let storeTeams = [];
          for(let i=0;i<this.nowSelStoreItem.length;i++){
              let obj = {
                  storeId:this.nowSelStoreItem[i].id,
                  name:this.nowSelStoreItem[i].name
              }
              storeTeams.push(obj);
          }
          this.$http({
            url:BASE_URL+"v1/team/add-store",
            method:"POST",
            data:{
                id:this.nowSelTeamId,
                storeTeams
            }
        }).then(res=>{
            if(res.data.code == 200){
                this.$message({
                    message: res.data.msg,
                    type: "success"
                });
                this.showSaveTeam = false;
                this.nowSelStoreItem = [];
            }else if(res.data.code == 400){
                this.$message({
                    message: res.data.msg,
                    type: "error"
                });
            }
        });
      },
      saveTeamByTeamInfo(){
          let storeTeams = [];
          for(let i=0;i<this.teamStoreList.length;i++){
              let obj = {
                  storeId:this.teamStoreList[i].storeId,
                  name:this.teamStoreList[i].storeName
              }
              storeTeams.push(obj);
          }
          this.$http({
            url:BASE_URL+"v1/team/add-store",
            method:"POST",
            data:{
                id:this.selTeam.id,
                storeTeams
            }
        }).then(res=>{
            if(res.data.code == 200){
                this.$message({
                    message: res.data.msg,
                    type: "success"
                });
                this.showSaveTeam = false;
                this.nowSelStoreItem = [];
            }else if(res.data.code == 400){
                this.$message({
                    message: res.data.msg,
                    type: "error"
                });
            }
        });
      },
      delNowSelStore(item){
          for(let i = 0;i<this.nowSelStoreItem.length;i++){
              if(this.nowSelStoreItem[i].id == item.id){
                  this.nowSelStoreItem.splice(i,1);
              }
          }
      },
      pushStoreList(item){
          let flag = false;
          console.log(this.nowSelStoreItem)
          for(let i=0;i<this.nowSelStoreItem.length;i++){
              if(this.nowSelStoreItem[i].id == item.id){
                  flag = true;
              }
          }
          if(!flag){
            this.nowSelStoreItem.push(item);
          }else{
              this.$message({
                    message: "不能添加重复的店铺",
                    type: "error"
                });
          }
      },
      showUpdateName(item){
          this.teamName = item.name;
          this.nowSelItem = item;
          this.showUpdateAlert = true;
      },
      updateName(){
          if(!this.teamName){
              this.$message({
                    message: "请输入连锁名",
                    type: "error"
                });
                return;
          }
         this.$http({
            url:BASE_URL+"v1/team/update-team",
            method:"POST",
            data:{
                id:this.nowSelItem.id,
                name:this.teamName
            }
        }).then(res=>{
            if(res.data.code == 200){
                this.$message({
                    message: res.data.msg,
                    type: "success"
                });
                this.showUpdateAlert = false;
                this.teamName = "";
                this.nowSelItem = {};
                this.getNameData();
            }else{
                this.$message({
                    message: res.data.msg,
                    type: "error"
                });
            }
        }) 
      },
    addName(){
        if(!this.newTeamName){
            this.$message({
                message: "请输入连锁名",
                type: "error"
            });
            return;
        }
        this.$http({
            url:BASE_URL+"v1/team/add-team",
            method:"POST",
            data:{
                name:this.newTeamName
            }
        }).then(res=>{
            if(res.data.code == 200){
                this.$message({
                    message: res.data.msg,
                    type: "success"
                });
                this.showAddAlert = false;
                this.newTeamName = "";
                this.getNameData();
            }else{
                this.$message({
                    message: res.data.msg,
                    type: "error"
                });
            }
        })
    },
    getNameData(){
       this.$http({
            url:BASE_URL+"v1/team/find-all",
            method:"GET",
        }).then(res=>{
            console.log(res);
            this.nameData = res.data;
        });
    }
  },
  created: function() {},
  mounted() {
      this.getNameData();
  }
};
</script>
<style lang="scss" scoped>
@import "./team.scss";
</style>
